<template>
    <div class="copywriting-list">
      <el-card class="list-card">
        <template #header>
          <div class="card-header">
            <h3>生成文案 ({{ copywritings.length }})</h3>
            <div class="header-actions">
              <el-button 
                type="success" 
                size="small" 
                :disabled="copywritings.length === 0 || loading"
                @click="exportToExcel"
                :loading="exporting"
              >
                导出Excel
              </el-button>
            </div>
          </div>
        </template>
  
        <div v-if="copywritings.length === 0" class="empty-state">
          <el-empty description="暂无文案数据，请先生成文案" />
        </div>
  
        <div v-else class="list-content">
          <el-scrollbar height="400px">
            <div 
              v-for="(copywriting, index) in copywritings" 
              :key="copywriting.id || index"
              class="copywriting-item"
              :class="{ 'success': copywriting.success, 'error': !copywriting.success }"
            >
              <div class="item-header">
                <div class="item-title">
                  <span class="video-name">{{ copywriting.video_name }}</span>
                  <el-tag 
                    :type="copywriting.success ? 'success' : 'danger'" 
                    size="small"
                    effect="light"
                  >
                    {{ copywriting.success ? '生成成功' : '生成失败' }}
                  </el-tag>
                </div>
              </div>
  
              <div class="copywriting-content" v-if="copywriting.success">
                <el-input
                  v-model="copywriting.copywriting"
                  type="textarea"
                  :rows="5"
                  placeholder="生成的文案内容..."
                  :disabled="loading"
                />
              </div>
              <div class="error-message" v-else>
                {{ copywriting.message || '生成文案失败' }}
              </div>
            </div>
          </el-scrollbar>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import copywritingService from '@/services/copywritingService';
  
  export default defineComponent({
    name: 'CopywritingList',
    props: {
      copywritings: {
        type: Array,
        default: () => []
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    emits: ['update:copywritings'],
    setup(props, { emit }) {
      const exporting = ref(false);
      
      // 导出到Excel
      const exportToExcel = async () => {
        if (props.copywritings.length === 0) {
          ElMessage.warning('没有可导出的文案数据');
          return;
        }
        
        // 准备导出数据，只导出成功的文案
        const exportData = props.copywritings
          .filter(c => c.success)
          .map(c => ({
            video_name: c.video_name,
            copywriting: c.copywriting
          }));
        
        if (exportData.length === 0) {
          ElMessage.warning('没有成功生成的文案可供导出');
          return;
        }
        
        exporting.value = true;
        try {
          const result = await copywritingService.exportToExcel(exportData);
          if (result.success) {
            ElMessage.success('文案已成功导出为Excel文件');
          } else {
            throw new Error(result.message || '导出失败');
          }
        } catch (error) {
          ElMessage.error(`导出Excel失败: ${error.message}`);
        } finally {
          exporting.value = false;
        }
      };
      
      return {
        exporting,
        exportToExcel
      };
    }
  });
  </script>
  
  <style scoped>
  .copywriting-list {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .card-header h3 {
    margin: 0;
  }
  
  .header-actions {
    display: flex;
    gap: 15px;
    align-items: center;
  }
  
  .empty-state {
    padding: 30px 0;
  }
  
  .list-content {
    padding: 10px 0;
  }
  
  .copywriting-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .copywriting-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  
  .copywriting-item.success {
    background-color: #f0f9eb0d;
  }
  
  .copywriting-item.error {
    background-color: #fef0f00d;
  }
  
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .item-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .video-name {
    font-weight: 500;
    color: #303133;
  }
  
  .copywriting-content {
    padding: 5px 0;
  }
  
  .error-message {
    color: #f56c6c;
    padding: 10px;
    background-color: #fef0f0;
    border-radius: 4px;
    margin: 5px 0;
  }
  </style>